<template>
  <view class="page-root">
    <nav-bar title="模式切换" color="white" show-back bg-color="black"></nav-bar>
    <view class="content">
      <view class="modes-list">
        <view class="title">
          <text class="font-bold">消费模式设置</text>
        </view>
        <view class="modes-group">
          <u-radio-group v-model="currMode" active-color="var(--kui-color-theme)" @change="modeChangeClick" size="18rpx" icon-size="13rpx" placement="column">
            <label v-for="item in modes" :key="item.value" class="modes-item flex items-center">
              <u-radio :name="item.value"></u-radio>
              <view  class="">
                <u-text :text="item.label" margin="5rpx" size="11rpx" bold></u-text>
                <u-text :text="item.subLabel" type="info" margin="5rpx"></u-text>
              </view>
            </label>
          </u-radio-group>
        </view>
      </view>
    </view>

    <resultPopup ref="refCommonPopup" @confirm="popupConfirm" :show-icon="false">
      <template #default="{ result }">
        <view class="p-10rpx my-30rpx flex-col items-center justify-center text-center"> 
          <!-- <u-code-input v-model="inputValue"></u-code-input> -->
           <view><u-input v-model="inputValue" placeholder="请输入密码" clearable font-size="10rpx" password /></view>
          <text class="text-base block mt-10rpx text-gray-400">{{ result.content }} </text>
        </view>
      </template>
      <template #confirm="{ config }">
        <view class="btns flex">
          <view class="btns-item" @click="popupCancel">
            <text class="btns-item-txt"> 取消 </text>
          </view>
          <view class="btns-item confirm" @click="popupConfirm(config)">
            <text class="btns-item-txt"> 确定 </text>
          </view>
        </view>
      </template>
    </resultPopup>
  </view>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import resultPopup from "@/components/common-popup/result-popup.vue";
import { Md5 } from "ts-md5";
import modules from "./modules";
import { closeSubScreen, openSubScreen } from "@/utils/sceeenUtils";
const store = useStore();

const currMode = ref(store.getters.consumptionPattern);

const modes = modules;

const modeChange = (e) => {
  store.commit("business/setConsumptionPattern", { mode: e, relaunch: true });
  // 如果切换成了无鉴权模式，需要关闭副屏让客户操作, 否则使用默认副屏
  if (e == 3) {
    closeSubScreen();
  } else {
    openSubScreen();
  }
  // 切换模式后， 清除购物车数据，（主要清除会员登录信息，防止支付组件错误读取会员信息）
  store.commit("shoppingCard/setCurrShoppingCard", {
    useMember: false, // 是否登录会员
    member: {}, // 会员信息 useMember = true 时使用,
  });

};

const popupConfig = {
  title: "提示",
  content: "确认切换模式？请输入密码进行验证",
  confirmText: "确认",
  cancelText: "取消",
  autoClose: false,
  //----- 自定义数据
  // 预切换的模式
  preMode: "",
};
const refCommonPopup = ref();
const modeChangeClick = (e) => {
  popupConfig.preMode = e;
  refCommonPopup.value.open(popupConfig);
};

// 验证密码
const inputValue = ref("");

const popupConfirm = (config) => {
  /**
   * 注意，开发调试的时候，因为 MD5PWD 这个 store 没将他本地化，所以开发更新文件时，
   * 会导致为空（没走登录流程），可以重走登录流程或将其设为本地化数据
   */

  // 与数据进行校验md5
  const sourceMd5 = store.state.user.MD5PWD;
  // console.log("sourceMd5", sourceMd5,'>>', inputValue.value, Md5.hashStr(inputValue.value));
  if (Md5.hashStr(inputValue.value) != sourceMd5) {
    uni.$u.toast("密码错误");
  } else {
    modeChange(popupConfig.preMode);
  }
};

// 取消
const popupCancel = () => {
  // 恢复数据
  currMode.value = store.getters.consumptionPattern;
  refCommonPopup.value.close();
};
</script>
<style lang="scss" scoped>
.page-root {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
  .content {
    // height: 100%;
    width: 100%;
    margin: auto;
    max-width: 70vw;
  }
}

.modes-list {
  width: 100%;
  border: 1px solid #eee;
  align-self: center;
  align-items: center;
  border-top-right-radius: 5rpx;
  border-top-left-radius: 5rpx;
  overflow: hidden;

  .title {
    background-color: lightgray;
    padding: 10rpx;
  }

  .modes-group {
    padding: 10rpx;

    .modes-item {
      border-bottom: 1px solid #eee;
    }
  }
}

.btns-item {
  background-color: #efefef;
  padding: 5rpx 20rpx;
  border-radius: 5rpx;
  margin: 0rpx 15rpx;
  font-size: 12rpx;
  &.confirm {
    color: white;
    background-color: red;
  }

  .btns-item-txt {
    font-size: 10rpx;
    padding: 5rpx 15rpx;
  }

  ::v-deep .u-button {
    padding: 2rpx 20rpx;
  }
}
</style>
